<template>
	<view>

		<view class="hdtybox" :class="hdc" :style="topsty">
			<topboxVue :tit="$t('hd.bt6')"></topboxVue>
			<view class="topbox">
				<view class="topbox-infobox mb20">
					<view class="bj_left mb30">
						<image src="/static/hd/ico4.png" class="topbox-infobox-sico"></image>
						<text class="f28 fwb">
							{{$t("vip.tit1")}}
						</text>
					</view>
					<view class="topbox-infobox-jlinfo mb30 bj_between f24 fwb">
						<view class="">
							<text>{{$t("vip.tit2")}}</text>
							<text class="cy">{{$t("menu.$")}} {{getdlq()}}</text>
						</view>
						<view class="">
							<text>{{$t("vip.tit3")}}</text>
							<text class="cy">{{$t("menu.$")}} {{getylq()}}</text>
						</view>
					</view>
					<view class="bj_between f26 mb50" @click="opgc">
						<text>
							{{$t("vip.tit4")}}
						</text>
						<text class="cy">
							{{$t("vip.btn1")}}
						</text>
					</view>

					<view class="topbox-infobox-mrbox bj_between mb40">
						<view class="topbox-infobox-mrbox-lvfb bj_center" @click="mrf(0)">
							<image src="/static/prev.png" mode="widthFix"></image>
						</view>
						<swiper :current="mrindex" @change="mrch" :display-multiple-items="2" class="w100 h100">
							<swiper-item v-for="item in mrlist">
								<view class="topbox-infobox-mrbox-mrinfo bj_sx bj_center">
									<view class=" fwb mb40" :class="item.cl">
										{{item.tit}}
									</view>
									<view class="cy f30 fwb mb40">
										{{$t("menu.$")}} {{item.bonus}}
									</view>
									<view class="f24 ca2" v-if="item.bonus == 0" v-html="$t('vip.txt1')"></view>
								</view>
							</swiper-item>
						</swiper>

						<view class="topbox-infobox-mrbox-lvfb bj_center" @click="mrf(1)">
							<image src="/static/lm/next.png" mode="widthFix"></image>
						</view>
					</view>

					<view class="tc f22" @click="setshowindex(1)">
						<text style="margin-right: 10rpx;">{{$t("vip.tit5")}}</text>
						<image src="/static/lm/next.png" style="width: 16rpx;" mode="widthFix"></image>
					</view>
				</view>

				<view class="topbox-infobox mb20">
					<view class="topbox-infobox-jitem bj_between por" v-for="(item , i) in jlist">
						<view class="bj_left">
							<image :src="item.ico" class="topbox-infobox-jitem-ico"></image>
							<text>{{item.tit}}</text>
							<image src="/static/hd/wh.png" class="topbox-infobox-jitem-wh" @click="showtxt(i)"></image>
						</view>
						<view class="ca2">
							{{item.tag}}
						</view>
						<view class="topbox-infobox-jitemtc" v-if="item.showtxt">
							<view class="f28 fwb">
								{{item.tit}}
							</view>
							<view v-html="item.html"></view>
						</view>
					</view>
				</view>

				<view class="topbox-infobox">
					<view class="bj_left mb20">
						<image src="/static/hd/vip.png" class="topbox-infobox-vipico"></image>
						<text class="f28 fwb">{{$t("vip.tit6")}}</text>
					</view>

					<view class="topbox-infobox-lvinfobox mb30">
						<swiper :current="lvindex" @change="lvch" :circular="true" class="w100 h100">
							<swiper-item v-for="(item,i) in info.vipinfo.vips">
								<view class="f26 tc mb10">
									{{item.name}}
								</view>
								<view class="mb50 f30 fwb tc" :class="item.level == info.vipinfo.level ? '' : 'vih'">
									Novatos
								</view>
								<view class="topbox-infobox-lvinfobox-lvpicbox bj_center">
									<image :src="common.websiteUrl + item.pic" mode=""></image>
								</view>
								<view class="mb20 f30 tc">
									<text class="cy">
										{{$t("menu.$")}}
										{{info.vipinfo.bet_all}}
									</text>
									<text> / </text>
									<text>
										{{$t("menu.$")}}
										{{item.betting_condition}}
									</text>
								</view>
								<view class="mb40 tc f24">
									{{$t("vip.lvt1")}}
								</view>
								<view class="topbox-infobox-lvinfobox-lvinfo">
									<view class="tc f30 mb20">
										{{$t("vip.lvt2")}}
									</view>
									<view class="bj_between f26 mb30">
										<text>{{$t("vip.lvt3")}}</text>
										<text>{{item.withdraw_fee}}%</text>
									</view>
									<view class="bj_between f26 mb30">
										<text>{{$t("vip.lvt4")}}</text>
										<text>{{item.withdraw_daily_limit}}</text>
									</view>
									<view class="bj_between f26">
										<text>{{$t("vip.lvt5")}}</text>
										<text>{{item.withdraw_daily_times}}</text>
									</view>
								</view>
								<view class="topbox-infobox-lvinfobox-lvgs bj_center">
									{{$t("vip.gs")}}{{item.upgrade_bonus}}%
								</view>
								<view class="topbox-infobox-lvinfobox-lvbtn bj_center"
									:style="'opacity:' + (info.vipinfo.bonus_unreceived >0 ? '1':'0.6')">
									<image src="/static/hd/ico5.png"></image>
									<text>{{$t("vip.btn")}}{{$t("menu.$")}} {{info.vipinfo.bonus_unreceived}}</text>
								</view>
							</swiper-item>

						</swiper>

						<view class="topbox-infobox-lvinfobox-lvfb bj_center" @click="lvf(0)">
							<image src="/static/prev.png" mode="widthFix"></image>
						</view>
						<view class="topbox-infobox-lvinfobox-lvfb bj_center" @click="lvf(1)">
							<image src="/static/lm/next.png" mode="widthFix"></image>
						</view>
					</view>

					<view class="tc f22" @click="setshowindex(2)">
						{{$t("vip.btn2")}}
					</view>
				</view>
			</view>


			<bottomVue></bottomVue>
		</view>

		<view class="vipgc bj_center" v-if="showgc">
			<view class="vipgc-linfo">
				<view class="vipgc-linfo-top">
					<image src="/static/xx.png" class="vipgc-linfo-top-xx" @click="clgc"></image>
				</view>
				<view class="vipgc-linfo-box">
					<view class="vipgc-linfo-box-item bj_sx" v-for="item in mrlist">
						<view class="f30 mb30">
							{{item.tit}}
						</view>
						<view class="cy fwb f40 mb50">
							{{$t("menu.$")}} {{item.bonus}}
						</view>
						<view class="c9c f26 tc" v-if="item.bonus == 0" v-html="$t('vip.txt1')"></view>
					</view>
				</view>
			</view>
		</view>

		<vipi1Vue v-if="showindex == 1"></vipi1Vue>
		<vipi2Vue v-if="showindex == 2"></vipi2Vue>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	import vipi1Vue from './vipi1.vue';
	import vipi2Vue from './vipi2.vue';
	const {
		t
	} = useI18n()
	provide("repage", repage);
	provide("setshowindex", setshowindex);

	const props = defineProps({
		topsty: {
			type: Object,
			default: {}
		},
	});

	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")
	let showgc = ref(false)

	let showindex = ref(0)
	let info = ref({})

	let jlist = ref([{
			ico: "/static/hd/j1.png",
			tit: t("vip.item1"),
			tag: t("vip.btn3"),
			showtxt: false,
			html: "．Sempre que jogar, você receberá imediatamente vantagem no Jogos.<br/>．Após resgatar, você pode receber novamente a cada 30 minutos através da página de recompensas ou do menu suspenso"
		},
		{
			ico: "/static/hd/j2.png",
			tit: t("vip.item2"),
			tag: t("vip.btn3"),
			showtxt: false,
			html: "．O Bônus Diário é baseado nas jogar, lucros, perdas reembolsadas e jogos jogados nas últimas 24 horas pelo usuário, todos incluídos no seu Bônus Diário.<br/>．Comece a receber o Bônus Diário acumulando jogar de R$10 no mesmo dia.<br/>．Após receber, a cada 24 horas, os usuários podem novamente receber o Bônus Diário.<br/>．Ao receber o Bônus Diário, 20 % da recompensa será imediatamente creditada ao saldo do usuário, enquanto os 80 % restantes serão adicionados ao calendário de recompensas dentro de 10 dias"
		},
		{
			ico: "/static/hd/j3.png",
			tit: t("vip.item3"),
			tag: t("vip.btn3"),
			showtxt: false,
			html: "．Não se esqueça de resgatar o seu Bônus Semanal todas segunda-feiras!<br/>．O Bônus Semanal é calculado com base nas jogar, ganhos, perdas reembolsadas e jogos jogados nas últimas 7 dias.<br/>．Você pode adicionar o Bônus Semanal ao seu calendário a cada 7 dias.<br/>．Após resgatar o Bônus Semanal, 20% será imediatamente creditado em seu saldo, e os 80% restantes serão adicionados ao Calendário de Recompensas em até 7 dias!"
		},
		{
			ico: "/static/hd/j4.png",
			tit: t("vip.item4"),
			tag: t("vip.btn3"),
			showtxt: false,
			html: "．No primeiro dia de cada mês, resgate os frutos do seu esforço do mês anterior!<br/>．O Bônus Mensal é calculado com base nas apostas realizadas, ganhos, perdas reembolsadas e jogos jogados nos últimos 30 dias.<br/>．Você pode adicionar o Bônus Mensal ao seu calendário a cada mês.<br/>．Após resgatar o Bônus Mensal, 20 % será imediatamente creditado em seu saldo, e os 80 % restantes serão adicionados ao Calendário de Recompensas em até 30 dias!"
		}
	])

	function getdlq() {
		return getApp().globalData.userInfo.vipinfo.bonus_unreceived
	}

	function getylq() {
		return getApp().globalData.userInfo.vipinfo.bonus_received
	}

	function showtxt(index) {
		for (var i = 0; i < jlist.value.length; i++) {
			jlist.value[i].showtxt = false
		}
		jlist.value[index].showtxt = true
		setTimeout(function() {
			jlist.value[index].showtxt = false
		}, 5000)
	}

	let lvindex = ref(0) // 会员等级介绍序号
	let mrindex = ref(0) // 每日奖金的序号

	const lvch = (e) => {
		lvindex.value = e.detail.current // 更新 lvindex
	}

	const mrch = (e) => {
		mrindex.value = e.detail.current // 更新 mrindex
	}

	let mrlist = ref([])
	let lvlist = ref([])

	// 控制每日奖金翻页
	const mrf = e => {
		if (e == 0) { // 上一页
			if (mrindex.value > 0) {
				mrindex.value--
			}
		} else { // 下一页
			if (mrindex.value < mrlist.value.length - 1) {
				mrindex.value++
			}
		}
	}
	// 控制会员等级介绍
	const lvf = e => {
		if (e == 0) { // 上一页
			if (lvindex.value > 0) {
				lvindex.value--
			} else {
				lvindex.value = lvlist.value.length - 1
			}
		} else { // 下一页
			if (lvindex.value < lvlist.value.length - 1) {
				lvindex.value++
			} else {
				lvindex.value = 0
			}
		}
	}

	function opgc() {
		showgc.value = true
	}

	function clgc() {
		showgc.value = false
	}

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}

	function setshowindex(v) {
		showindex.value = v
	}

	onShow(function() {
		mrlist.value = getApp().globalData.userInfo.vipinfo.month_bonus_list
		let now = new Date();
		for (var i = 0; i < mrlist.value.length; i++) {
			let item = mrlist.value[i]
			let date = new Date(String(item.date).replace(/-/g, "/"))
			if (now.getDate() == date.getDate()) {
				item.tit = "hoje"
				item.cl = "f30"
				item.t = true
				if (mrindex.value == 0) {
					mrindex.value == i
				}
			} else if (now.getDate() == date.getDate() + 1) {
				item.tit = "ontem"
				item.cl = "f30"
				item.t = true
				if (mrindex.value == 0) {
					mrindex.value == i
				}
			} else {
				item.tit = item.date
				item.cl = "f26"
				item.t = false
			}
		}
		info.value = getApp().globalData.userInfo
		for (var i = 0; i < info.value.vipinfo.vips.length; i++) {
			if (info.value.vipinfo.vips[i].level == info.value.vipinfo.level) {
				lvindex.value = i
			}
		}
	})
</script>

<style scoped lang="scss">
	.topbox {
		padding: 20rpx;

		&-infobox {
			background: #00561D;
			border-radius: 20rpx;
			padding: 28rpx 20rpx;

			&-mrbox {
				height: 356rpx;

				swiper-item {
					padding: 0 10rpx 0 20rpx;
				}

				swiper-item:nth-child(even) {
					padding: 0 20rpx 0 10rpx;
				}

				&-mrinfo {
					height: 100%;
					background: #003311;
					border-radius: 12rpx;
					padding: 0 52rpx;
					text-align: center;
				}

				&-lvfb {
					width: 48rpx;
					height: 124rpx;
					background: #05B440;
					border-radius: 8rpx;

					image {
						width: 20rpx;
					}
				}


			}

			&-lvinfobox {
				position: relative;
				height: 1076rpx;
				background: #003311;
				border-radius: 20rpx;

				swiper-item {
					padding: 20rpx 24rpx 0;
				}

				&-lvpicbox {
					height: 212rpx;
					margin-bottom: 80rpx;
					background: url("/static/hd/qq.png") no-repeat center center;
					background-size: auto 100%;

					image {
						width: 104rpx;
						height: 104rpx;
					}
				}

				&-lvinfo {
					background: #00561D;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					padding: 28rpx 26rpx;
				}

				&-lvgs {
					font-size: 26rpx;
					height: 84rpx;
					background: #05B440;
					border-radius: 0rpx 0rpx 20rpx 20rpx;
					margin-bottom: 26rpx;
				}

				&-lvbtn {
					height: 88rpx;
					background: linear-gradient( 360deg, #009E35 0%, #10E658 100%);
					border-radius: 20rpx;
					font-size: 30rpx;
					font-weight: bold;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				&-lvfb {
					position: absolute;
					width: 48rpx;
					height: 124rpx;
					background: #05B440;
					border-radius: 8rpx;
					top: 206rpx;
					left: 44rpx;

					image {
						width: 20rpx;
					}
				}

				&-lvfb:last-child {
					left: auto;
					right: 44rpx;
				}
			}

			&-sico {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			&-jlinfo {
				height: 88rpx;
				background: #001F0A;
				border-radius: 12rpx;
				border: 2rpx solid rgba(5, 105, 196, 0.3);
				padding: 0 22rpx;
			}

			&-jitem {
				height: 92rpx;
				background: #001F0A;
				border-radius: 12rpx;
				padding: 0 38rpx 0 22rpx;
				font-size: 28rpx;
				margin-bottom: 30rpx;

				&-ico {
					width: 64rpx;
					height: 64rpx;
					margin-right: 20rpx;
				}

				&-wh {
					width: 28rpx;
					height: 28rpx;
					margin-left: 10rpx;
				}
			}

			&-jitem:last-child {
				margin-bottom: 0;
			}

			&-jitemtc {
				width: 666rpx;
				background: rgba(0, 0, 0, 0.7);
				border-radius: 20rpx;
				padding: 24rpx 34rpx;
				font-size: 22rpx;
				color: #fff;
				position: absolute;
				left: 0;
				bottom: 90rpx;
			}

			&-vipico {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
		}
	}

	@media (min-width: 768px) {
		.vipgc {
			left: calc(50vw - 375rpx) !important;
			width: 750rpx !important;
			/* 与主容器同宽 */
		}
	}

	.vipgc {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* 100% 相对于 #app 的宽度 */
		height: 100%;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background: rgba(0, 0, 0, 0.5);
		z-index: 1002;

		&-linfo {
			width: 698rpx;
			padding-bottom: 48rpx;
			background: linear-gradient( 180deg, #007628 0%, #177747 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			&-box {
				background: #00561D;
				overflow-y: auto;
				padding: 30rpx;
				height: 1140rpx;

				&-item {
					width: 304rpx;
					background: #001F0A;
					border-radius: 20rpx;
					float: left;
					height: 344rpx;
					margin-bottom: 20rpx;
				}

				&-item:nth-child(even) {
					float: right;
				}
			}

			&-top {
				width: 698rpx;
				height: 112rpx;
				background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				position: relative;

				&-xx {
					width: 40rpx;
					height: 40rpx;
					top: 36rpx;
					right: 30rpx;
					position: absolute;
				}
			}
		}
	}
</style>